<template>
    <div class="myArticleHome" v-infinite-scroll="getArticle" :infinite-scroll-disabled="articleData.noMore" :infinite-scroll-distance="'5'">
        <ul style="padding: 0">
            <li
                v-for="(item, i) in articleData.articleContent"
                :key="i"
                class="infinite-list-item"
            >
                <div style="width: 100%;">
                    <div style="width: 100%;height: 50px;display: flex">
                        <el-avatar
                            :size="50"
                            :src="item.adminVo.userFace"
                            style="float: left"
                        ></el-avatar>
                        <div style="font-size: 16px;padding-top: 15px; font-weight: bold;min-width: 60px">{{
                                item.adminVo.name
                            }}
                        </div>
                        <i class="el-icon-plus" style="margin: 16px 0 0 10px;" @click="follow(item)"/>
                        <i class="el-icon-delete" style="margin: 16px 0 0 10px;color: red" @click="delArticle(item)"></i>
                    </div>
                </div>
                <div v-html="item.content" class="collapse"></div>
                <div class="sc-pl-dz">
                    <i class="el-icon-platform-eleme"> 收藏</i>
                    <i class="el-icon-chat-dot-round" @click="commentMethod(item)">
                        评论 {{ formatValue(item.comment) }}</i
                    >
                    <i class="el-icon-eleme" @click="thumbsUp(item)">
                        点赞 {{ formatValue(item.thumbup) }}</i
                    >
                </div>
                <div v-if="item.openComment">
                    <div>
                        <el-input placeholder="发布您的评论" v-model="input"></el-input>
                        <div class="release">
                            <!--              <span>同时发布</span>-->
                            <el-button type="warning" @click="insertComment(item)" round>评论</el-button>
                        </div>
                    </div>
                    <div v-for="(itemData, i) in item.commentData" :key="i">
                        {{ itemData.content }}
                    </div>
                </div>
            </li>
        </ul>
        <p
            v-if="articleData.loading"
            v-loading="articleData.loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            style="height: 40px"
        ></p>
        <p v-if="articleData.noMore" style="text-align: center">没有更多了...</p>
    </div>
</template>

<script>
import {getArticleByUserName, insertComment} from "@/api/modules/article";

export default {
    name: "userArticle",
    data() {
        return {
            //api
            api: this.$store.getters.app.api,
            //文章数据
            articleData: {
                articleContent: [],
                noMore: false,
            },
            //页面数据加载
            loading: false,
            //获取文章数据的参数
            selectListParam: {
                current: 0,
                size: 5,
                userName: this.$store.getters.app.userInfo.username,
            },
            //是否打开评论
            openComment: false,
            //文章内容
            input: "",
            //当前用户信息
            userInfo: this.$store.getters.app.userInfo,
        };
    },
    async mounted() {
        // await this.getArticle();
    },
    methods: {
        /**
         * 删除文章
         * @param item
         * @returns {Promise<void>}
         */
        async delArticle(item){
            await this.$confirm("你确定要删除吗？", "删除提示", {
                confirmButtonText: "确定",
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await this.api.article.delArticle({articleId:item.id});
                this.articleData.articleContent = []
                this.selectListParam.current = 0
                this.getArticle();
            })
        },
        //关注
        async follow(item){
            let res = await this.api.article.follow({authorId:item.adminVo.userName,userId:this.userInfo.username})
            if (res.code === 200){
                this.$message.success(res.message)
            }
        },
        /**
         * 获取文章数据
         * @returns {Promise<void>}
         */
        async getArticle() {
            this.selectListParam.current++
            this.articleData.loading = true;
            let res = await this.api.article.getArticleByUserName(this.selectListParam);
            this.articleData.loading = false;
            if (res.code == 200) {
                if (res.data.list.length > 0) {
                    let data = res.data.list;
                    data.forEach(item => {
                        this.articleData.articleContent.push(item)
                    })
                    // eventBus.$emit("getArticleData", this.articleData);

                } else {
                    this.articleData.noMore = true;
                }
            }
            //console.log(res,"res-")
        },
        /**
         * 获取评论数据
         * @param data
         * @returns {Promise<void>}
         */
        async commentMethod(data) {
            if (data.openComment) {
                data.openComment = false
            } else {
                data.openComment = true
                if (!data.commentData) {
                    let obj = {
                        articleId: data.id,
                        current: 1,
                        size: 10,
                    };
                    let res = await this.api.article.findByarticleId(obj);
                    data.commentData = res.data.content;
                }
            }
            this.$forceUpdate();
        },
        unshift(data) {
            // this.articleData.articleContent.unshift(data);
        },
        formatValue(data) {
            if (data > 10000) {
                data = (data / 10000).toFixed(2) + " W";
            }
            if (data == 0) {
                data = null;
            }
            return data;
        },
        /**
         * 点赞接口
         */
        thumbsUp(item) {
            let obj = {
                authorId: item.adminVo.userName,
                userName: this.userInfo.username,
                articleId: item.id,
            };
            // //console.log(item);
            if (item.thumbsUpState) {
                item.thumbsUpState = false;
                item.thumbup--;
            } else {
                item.thumbsUpState = true;
                item.thumbup++;
            }
            this.api.article.thumbsUp(obj);
        },
        //评论
        insertComment(item) {
            let param = {
                articleId: item.id,
                content: this.input,
                userName: this.userInfo.username,
                adminVo: {
                    userName: this.userInfo.username,
                    name: this.userInfo.name,
                    userFace: this.userInfo.userFace
                }
            }
            //console.log(param, "param")
            this.api.article.insertComment(param).then(res => {
                if (res.code === 200) {
                    if (!item.commentData) {
                        item.commentData = []
                    }
                    item.commentData.push(param)
                    this.$forceUpdate();
                }
            })
        }
    },
};
</script>

<style scoped>
ul {
    padding: 0;
    margin: 0;
}

.myArticleHome {
    position: relative;
    overflow: auto;
    width: 100%;
    height: 100%;
}

.collapse {
    max-height: 500px;
    overflow: hidden;
    width: 100%;
    margin-bottom: 15px;
    padding-top: 15px;
}

.infinite-list-item {
    margin: 15px 0px;
    background: #f5f5f5;
    padding: 10px;
    overflow: hidden;
}

.sc-pl-dz {
    font-size: 15px;
    display: block;
    margin-bottom: 10px;
}

.sc-pl-dz i {
    text-align: center;
    width: 180px;
    margin: 0px 14px;
}

.sc-pl-dz i:hover {
    color: coral;
}

li {
    list-style: none;
}

.release {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

::v-deep .el-input__inner {
    border-color: rgb(255, 165, 0);
}

::v-deep .el-input__inner:hover {
    border-color: rgb(255, 165, 0);
}

::v-deep .el-input__inner:focus {
    border-color: rgb(255, 165, 0);
}
</style>